---
slug:  react-typescript #路径，不能重复
title: react-typescript # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

#### 1.安装依赖

```shell
npm install --save-dev typescript @types/react @types/react-dom @types/node
```

#### 2.生成tsconfig.json

```shell
npx tsc --init
```

#### 3.修改tsconfig.json

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,                // 允许混合 JS 文件
    "checkJs": false,               // 不检查 JS 文件的类型错误（可选）
    "skipLibCheck": true,           // 跳过库文件的类型检查
    "esModuleInterop": true,        // 允许 CommonJS 和 ES 模块互操作
    "allowSyntheticDefaultImports": true,
    "strict": true,                 // 启用严格类型检查（推荐）
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,                 // 不生成 JS 文件（由 CRA 处理）
    "jsx": "react-jsx"
  },
  "include": ["src"]                // 指定源码目录
}

```

#### 在`ts`中开启类的装饰器

##### 修改`tsconfig.json`

```json
{
  "compilerOptions": {
    "experimentalDecorators": true,    // 启用装饰器
    "emitDecoratorMetadata": true,     // 生成装饰器元数据（如 NestJS 需要）
    "target": "ES5",                   // 装饰器需要 ES5 或更高版本
    "module": "commonjs"               // 装饰器在 CommonJS 模块中更稳定
  }
}

```


##### 如果使用了`babel`则需要安装`babel插件`

```shell
npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
```

###### 在`.babelrc`或`babel.config.json`配置

```json
{
   "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": false }],
      ["@babel/plugin-transform-private-methods", { "loose": false }],
      ["@babel/plugin-transform-private-property-in-object", { "loose": false }]
    ]
}
```



